<template>
    <div class="empty" :style="{'background-image':`url(${skinList[skinIndex].url})`}">
     <a-button @click="$router.push('/love')" shape="round" class="back" size="large">
            <template #icon>
                <icon-home />
            </template>
        </a-button>
        <p>页面不存在~</p>
        <span to="/love" @click="$router.push('/love')">返回主页</span>
    </div>
</template>
<script setup>
import { skinList,skinIndex } from '../utils/skin';

</script>
<style lang="less" scoped>
.empty{
    background-image: url(../assets/skin/76295.png);
    // background-image: url(../assets/skin/1593716.png);
    // filter: brightness(80%) saturate(130%) blur(40px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all .5s;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .back {
        position: absolute;
        top: 30px;
        left: 59px;
        font-size: 20px;
        color: var(--color-text-2);
        z-index: 999;
    }
    p{
        color: #fff;
        font-size: 40px;
        text-shadow: 3px 1px 13px black;
        font-family: '华文彩云';
        margin-bottom: 20px;
    }
    span{
        color: #fff;
        cursor: pointer;
        font-size: 30px;
        text-shadow: 3px 1px 13px black;
        font-family: '华文彩云';
    }
}
</style>